<template>
  <div class="tsd-base tsd-ph_last apply-result" id="creditResult">

    <!--    平台审核中    -->
    <div class="ar-middle ar-top" v-if="statusCode=='step0.1'">
      <p><img src="../../../../assets/applyResult/apply-ing.png" alt="" /></p>
      <p><span class="top-title">数据审核中</span></p>
      <p class="sec-title">您的企业信息已提交，正在平台数据审核阶段，请您耐心等待！如有任何疑问，请致电客户经理。</p>
    </div>

    <!--    平台审核不通过    -->
    <div class="ar-middle ar-top" v-else-if="statusCode=='step0.2'">
      <p><img src="../../../../assets/applyResult/apply-error.png" alt="" /></p>
      <p><a @click="tryApplyAgain" style="color: #ffa01d;text-decoration:underline">重新选择产品</a></p>
      <p class="sec-title">十分抱歉！您申请的资料未通过平台审核，如有任何疑问，请致电客户经理。</p>
    </div>

    <!--    预授信不通过    -->
    <div class="ar-middle ar-top" v-else-if="statusCode=='step0.4'">
      <p><img src="../../../../assets/applyResult/apply-error.png" alt="" /></p>
      <p><a @click="tryApplyAgain" style="color: #ffa01d;text-decoration:underline">重新选择产品</a></p>
      <p class="sec-title">十分抱歉！您申请的资料未通过银行额度预审审核，如有任何疑问，请致电客户经理。</p>
    </div>

    <!--    预授信通过    -->
    <div class="ar-middle" v-else-if="statusCode=='step1'">
      <div class="am-ysx am-ysx1">
        <p class="sec-title sec-title1">
          预授信额度：<span style="color: #FFA01D;font-size: 24px;padding-right: 4px">{{estAmount}}</span>万人民币
        </p>
        <p style="text-align: center;color: #8F9194;font-size: 12px">
          温馨提示：当前预授信额度并非最终额度，仅作参考，最终额度以银行授信为主
        </p>
        <p class="sec-title sec-title2">
          <img :src="nbEwmImg" alt="" /><br/>
          扫一扫上方二维码前往宁波银行进行授信申请
        </p>
      </div>
    </div>

    <!--   未通过银行审核    -->
    <div class="ar-middle ar-top" v-else-if="statusCode=='step6'">
      <p><img src="../../../../assets/applyResult/apply-error.png" alt="" /></p>
      <p><a @click="tryApplyAgain" style="color: #ffa01d;text-decoration:underline">重新选择产品</a></p>
      <p class="sec-title thd-title">
        十分抱歉！您的申请资料未通过银行审核。如有任何疑问，请致电客户经理。
      </p>
    </div>

    <!--   通过银行审核    -->
    <div class="ar-middle" v-else-if="statusCode=='step3'">
      <div class="am-bg" style="margin-top: 80px">
        <span style="font-weight: bold;font-size: 20px">{{vMoney.decode((usableAmount/10000),2)}}万</span>
      </div>
      <p class="sec-title">
        恭喜您！您的申请资料已通过银行审核，请前往线下就近网点进行开户！如有任何疑问，请致电客户经理。
      </p>
      <p class="sec-title four-title four-title_">
        网点信息：<br/>
        <a class="a-map" @click="showLltMap">查看地图</a>
      </p>
    </div>

    <!--    开户成功    -->
    <div class="ar-middle ar-top" v-else-if="statusCode=='step4'">
      <p>
        <img src="../../../../assets/applyResult/credit-suc.png" style="width: 40px" />
      </p>
      <p>
        <span class="top-title">开户成功</span>
      </p>

      <div class="top-aa">
        <div class="ta-title" style="height: 30px; padding-left: 74px;">
          <p class="title40 at-title">
            <img src="../../../../assets/applyResult/credit-title.png" />
            <span>开户信息</span>
          </p>
        </div>
      </div>
      <div class="top-aa">
        <div class="tb-title">
          <div class="title40" style="margin-top: 22px">
            <div style="width: 265px;float: left">
              <span class="span40">开户名称：</span>
            </div>
            <div style="width: 295px;float: left">
              <span>{{khInfo.uscName}}</span>
            </div>
          </div>
          <div class="title40">
            <div style="width: 265px;float: left">
              <span class="span40">开户行：</span>
            </div>
            <div style="width: 295px;float: left">
              <span>{{khInfo.accountName}}</span>
            </div>
          </div>
          <div class="title40">
            <div style="width: 265px;float: left">
              <span class="span40">开户账号：</span>
            </div>
            <div style="width: 295px;float: left">
              <span>{{khInfo.accountNumber}}</span>
            </div>
          </div>
          <div style="clear: both"></div>
        </div>
      </div>
      <div class="top-aa">
        <p class="title60" style="margin: 36px 0;">
          <el-button @click="goToLoan" type="warning" class="base-btn" style="width: 160px;border-radius: 0">我要提款</el-button>
        </p>
      </div>
    </div>

    <el-dialog
        title="网点信息"
        :visible.sync="mapVisible"
        width="90%">
      <lltmap></lltmap>
    </el-dialog>

    <el-dialog width="1100px" title="选择产品" :visible.sync="showSelectBank">
      <select-bank v-on:selected-bank="selectedBank"></select-bank>
    </el-dialog>

  </div>
</template>

<script>

import selectBank from "../../../process/selectBank";
import lltmap from '../../../common/map'
import {mapState} from 'vuex';
import {creditApplyStatus,queryFundNameAndQuota,queryOpenAccountMessage,wmrQueryAdvanceCreditQuota,confirmOpenResult} from '@/api/authen/agreed';
import {Loading} from 'element-ui';
import {creditApplyAgain,queryQrCodeCountInfo} from '@/api/plat/plat';
export default {
  name: "creditResult",
  data() {
    return {
      showSelectBank:false,
      mapVisible: false,
      applyTips: '',
      statusCode: null,
      usableAmount:'',
      khInfo:{
        accountName:'',
        accountNumber:'',
        uscName:''
      },
      envProduct:process.env.NODE_ENV === 'production',
      estAmount: '',
      nbEwmImg: ''
    }
  },
  components:{
    lltmap,selectBank
  },
  computed: mapState({
    user(state) {
      return state.user;
    }
  }),
  props: ['code','productCode'],
  mounted() {
    this.queryApplyStatus();
    //this.statusCode = 'step4'
  },
  methods: {
    showLltMap(){
      this.mapVisible = true;
    },
    queryApplyStatus() {
      let _ = this;
      let loadingInstance = Loading.service({
        text: '数据加载中...',
        fullscreen: false,
        target: document.getElementById('creditResult')
      });
      let uscCode = this.user.user.uscCode?this.user.user.uscCode:'';

      creditApplyStatus({
        "uscCode": uscCode,
        "fundCode": this.code?this.code:'',
        "productCode": this.productCode?this.productCode:''
      }).then(response => {
        if (response.code == 200) {
          if (response.data){
            _.handlerStatus(response.data.step, loadingInstance);
          }
        }else{
          loadingInstance.close();
        }
      }).catch(e => {
        loadingInstance.close();
      });
    },

    /***
     * 授信状态
     * 1、3、4、6
     * 修改日期：2021-3-10
     */
    handlerStatus(status, loadingInstance){
      let _ = this;
      this.statusCode = status;
      let uscCode = this.user.user.uscCode?this.user.user.uscCode:'';
      if(status == 'step1') {
        wmrQueryAdvanceCreditQuota(uscCode,this.productCode).then(res => {
          if (res.code == 200) {
            _.estAmount = res.data.creditLine;
          }
        });
        queryQrCodeCountInfo(uscCode,this.productCode).then(res => {
          if (res.code == 200) {
            if (res.data) {
              this.nbEwmImg = 'data:image/png;base64,' + res.data;
            }
          }
          loadingInstance.close();
        }).catch(e=>{
          loadingInstance.close();
        });
      }
      else if(status=='step3'){
        //完成授权，后台更新状态
        queryFundNameAndQuota(uscCode,this.productCode,this.code).then(res => {
          if (res.code == 200) {
            _.usableAmount = res.data.quota;
          }
          loadingInstance.close();
        }).catch(e=>{
          loadingInstance.close();
        })
      }
      else if(status=='step4'){
        queryOpenAccountMessage({
          uscCode: uscCode
        }).then(res => {
          if (res.code == 200) {
            _.khInfo = res.data;
          }
          loadingInstance.close();
        }).catch(e=>{
          loadingInstance.close();
        });
      }
      else if(status=='step7'){
        loadingInstance.close();
        this.$router.push({
          name: 'plat',
          query: {
            action: '7'
          }
        });
      }
      else {
        loadingInstance.close();
      }
    },
    tryApplyAgain() {
      this.showSelectBank = true
    },
    selectedBank(item){
      let _ = this;
      let uscCode = this.user.user.uscCode?this.user.user.uscCode:'';
      if(uscCode){
        this.showSelectBank = false;
        creditApplyAgain(item.fundCode,uscCode,item.productCode).then(res=>{
          if (res.code === 200) {
            _.$router.push({
              name: 'productDetail',
              query: item
            });
          }
        });
      }
    },
    /***
     * 获取二维码
     *
     */
    goToLoan() {
      confirmOpenResult().then(res=>{
        if(res.code==200){
          this.queryApplyStatus();
        }
      });
    }
  }
}
</script>

<style lang="scss">
.apply-result {

  background: white;
  height: calc(100vh - 90px);
  .ar-middle{
    margin: 20px auto 0 auto;
    .am-title{
      text-align: left;
      padding-left: 40px;
      font-weight: bold;
      font-size: 18px;
    }
    span.top-title{
      font-size: 16px;
      font-weight: bold
    }
    a{
      font-size: 18px;
    }
    img{
      width: 180px;
    }
    .sec-title{
      margin: 0 auto;
      width: 400px;
      text-align: left;
      font-size: 14px;
    }
    .thd-title{
      width: 500px;
    }
    .four-title{
      margin-bottom: 10px;
    }
    .four-title_{
      margin-top: 10px;
      .a-map{
        text-decoration:none;
        cursor: pointer;
        color: #8b92da;
        font-size: 14px;
        font-weight: bold;
      }
    }
    .title30{
      margin: 30px 0;
    }
    .title40{
      width: 100%;
      /*margin: 20px auto;*/
      margin-top: 0;
      margin-bottom: 22px;
      text-align: left;
      float: left;
      .span40{
        padding-left: 122px;
      }
    }
    .at-title{
      position: relative;
      margin: 10px auto;
      font-size: 16px;
      img{
        width: 7px;
        position: absolute;
        top: 3px;
        left: -12px;
      }
    }
    .title60{
      margin: 60px 0;
      .base-btn{
        border-radius: 6px;
        width: 120px;
      }
    }
    .am-bg{
      width: 403px;
      height: 199px;
      margin: 0 auto;
      background-image: url("../../../../assets/zsBank/zs_sxsq_success.png");
      span{
        position: relative;
        top: 24px;
      }
    }
    .am-ysx{
      width: 540px;
      height: 274px;
      margin: 0 auto;
      position: relative;
      img{
        width: 100%;
      }
      .ysx-title{
        font-weight: bold;
        position: absolute;
        left: 235px;
        font-size: 13px;
        top: 148px;
      }
      .ysx-amount{
        font-weight: bold;
        position: absolute;
        top: 73px; font-size: 18px;
        width: 100%;
        font-family: serif;
      }
    }
    .am-ysx1{
      width: 500px;
      margin-top: 90px;
      text-align: center;
      .sec-title1{
        margin:0;
        width: 500px;
        text-align: center;
        font-weight: bold;
        color: #303133;
        font-size: 18px
      }
      .sec-title2{
        text-align: center;
        width: 500px;
        color: #FFA01D;
        img{
          width: 224px;
          margin: 10px 0
        }
      }
    }
  }
  .ar-top {
    margin: 80px auto 0 auto;
    .top-aa{
      width: 100%;
      margin: 0 auto;
      float: left;
      font-weight: bold;
      .ta-title{
        width: 560px;text-align: center;margin: 0 auto;
      }
      .tb-title{
        width: 560px; text-align: center;margin: 0 auto;
      }
    }
  }
  .ar-bottom{
    margin: 0 auto;
    padding-top: 12px
  }
}
</style>

